<template>
  <div class="container">
    <!-- 添加页面导航 -->
    <PageNavigation pageTitle="登录日志" />
    
    <div class="page-header">
      <h2>登录日志</h2>
      <p>查看用户登录记录 (sys_logininfor 表)</p>
    </div>

    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="用户名">
        <el-input v-model="queryParams.userName" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item label="登录状态">
        <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
          <el-option label="成功" value="0" />
          <el-option label="失败" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="danger" @click="handleClear">清空日志</el-button>
        <el-button type="success" @click="exportData">导出数据</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="logList" style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="50" />
      <el-table-column prop="infoId" label="ID" width="80" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="ipaddr" label="IP地址" />
      <el-table-column prop="loginLocation" label="登录地点" />
      <el-table-column prop="browser" label="浏览器" />
      <el-table-column prop="os" label="操作系统" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
            {{ scope.row.status === '0' ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="msg" label="提示消息" />
      <el-table-column prop="loginTime" label="登录时间" width="180" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageNavigation from '@/components/common/PageNavigation.vue'

// 查询参数
const queryParams = reactive({
  userName: '',
  status: '',
  beginTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 10
})

const dateRange = ref([])
const logList = ref([])
const total = ref(0)
const loading = ref(false)

// 监听日期范围变化
const updateTimeRange = computed(() => {
  if (dateRange.value && dateRange.value.length === 2) {
    queryParams.beginTime = dateRange.value[0]
    queryParams.endTime = dateRange.value[1]
  } else {
    queryParams.beginTime = ''
    queryParams.endTime = ''
  }
  return dateRange.value
})

// 初始化页面
onMounted(() => {
  fetchLogList()
})

// 获取登录日志列表
const fetchLogList = async () => {
  loading.value = true
  try {
    // 这里应该是调用后端API，目前使用模拟数据
    // const res = await api.fetchLoginLogList(queryParams)
    
    // 模拟数据
    setTimeout(() => {
      logList.value = [
        {
          infoId: 1001,
          userName: 'admin',
          ipaddr: '192.168.1.101',
          loginLocation: '中国|北京|北京市',
          browser: 'Chrome',
          os: 'Windows 10',
          status: '0',
          msg: '登录成功',
          loginTime: '2025-04-24 08:30:15'
        },
        {
          infoId: 1002,
          userName: 'test',
          ipaddr: '192.168.1.102',
          loginLocation: '中国|上海|上海市',
          browser: 'Firefox',
          os: 'Windows 11',
          status: '1',
          msg: '密码错误',
          loginTime: '2025-04-24 09:15:22'
        },
        {
          infoId: 1003,
          userName: 'agent',
          ipaddr: '192.168.1.103',
          loginLocation: '中国|广州|广州市',
          browser: 'Edge',
          os: 'MacOS',
          status: '0',
          msg: '登录成功',
          loginTime: '2025-04-24 10:05:30'
        }
      ]
      total.value = 3
      loading.value = false
    }, 500)
  } catch (error) {
    console.error('获取登录日志失败:', error)
    loading.value = false
    ElMessage.error('获取登录日志失败')
  }
}

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1
  fetchLogList()
}

// 重置
const resetQuery = () => {
  queryParams.userName = ''
  queryParams.status = ''
  dateRange.value = []
  queryParams.beginTime = ''
  queryParams.endTime = ''
  handleQuery()
}

// 分页大小变化
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  fetchLogList()
}

// 分页页码变化
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  fetchLogList()
}

// 清空日志
const handleClear = () => {
  ElMessageBox.confirm('确定要清空所有登录日志吗？此操作不可恢复！', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('清空成功')
    fetchLogList()
  }).catch(() => {
    // 取消操作
  })
}

// 导出数据
const exportData = () => {
  ElMessage.info('数据导出功能开发中')
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  margin: 0;
}

.search-form {
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 